<template>
    <div class="back_contain_n Power">
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex">
                        <el-input clearable v-model="queryForm.name" placeholder="角色"></el-input>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="queryForm.status" placeholder="状态">
                            <el-option label="在用" value="0"></el-option>
                            <el-option label="停用" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
            </div>
        </div>
        <div class="Search_Top_Input">
            <div class="addNew">
                <!-- <span @click="addRole()" v-if="hasRole('role:system:add')"><i class="el-icon-circle-plus-outline"></i> 新建</span> -->
                <span @click="addRole()" v-if="hasRole('user:system:add')"><i class="el-icon-circle-plus-outline"></i> 新建</span>
                <span class="delete" @click="batchDelRoles()" v-if="hasRole('role:system:del')"><i class="el-icon-delete"></i> 删除</span>
            </div>
        </div>
        <!-- table -->
        <sys-table
            :isMultipleSelection="true"
            :tableData="tableData"
            :tableLoading="tableLoading"
            :tableHeader="tableHeader"
            :scopeWidth="120"
            @getSelection="getSelection"
			ref="systable"
        >
            <template slot-scope="scope" slot="operate">
                <el-button @click="editRole(scope.row)" v-if="hasRole('role:system:edit')" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" v-if="hasRole('role:system:del')" @click="deleteRole(scope.row)" >删除</el-button>
            </template>
        </sys-table>

        <!-- 新建弹框 -->
        <div class="zll-dialog">
            <popout :title="operateType=='add'?'角色权限 · 新建':'角色权限 · 编辑'" :visible.sync="addDialog" v-show="addDialog" class="max_size">
				<Add ref="add" slot="content" :editData="roleDetail" :selfValue="selfValue" :type="operateType" :roles="tableData" ></Add>
                <template slot="bottom">
                    <p class="zll-botton" @click="()=>{this.$refs.add.savePermission('addForm')}">提 交</p>
                </template>
            </popout>
        </div>
    </div>
</template>

<script>
    import Add from './Add'
    export default {
        data(){
            return {
            	queryForm:{status:'',name:''},
				tableData: [],
				tableHeader:[],
				tableLoading:true,
				option:{showOperate:true},
				selectChoice:[],
				roleDetail:{},
				operateType:"add",
				selfValue:"",
				addDialog:false,
            }
        },
        methods: {
			getSelection(val){
				this.selectChoice = val;
			},
			getList() {
				let self = this;
				self.tableLoading = true;
				self.$refs.systable.resetPage();
				self.$http({
					url: "/jinl/role/getRoleList",
					method: "post",
					params:self.queryForm
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						// 处理时间戳转换为日期格式
						resp.result.forEach(item => {
							const date = new Date(item.createTime);
							const year = date.getFullYear();
							const month = (date.getMonth() + 1).toString().padStart(2, '0');
							const day = date.getDate().toString().padStart(2, '0');
							const hours = date.getHours().toString().padStart(2, '0');
							const minutes = date.getMinutes().toString().padStart(2, '0');
							const seconds = date.getSeconds().toString().padStart(2, '0');
							item.createTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
						});
						self.tableData = resp.result;
						self.tableHeader =  [{"columnValue": "seq", "columnName": "层级","width":"100px"},
							{"columnValue": "roleName", "columnName": "角色","width":"120px"},
							{"columnValue": "rolePermissionCn", "columnName": "角色描述"},
							{"columnValue": "createTime", "columnName": "日期"},
							{"columnValue": "stopStatusCn", "columnName": "当前用户数","width":"100px"},];
						self.option.showOperate = true;
					}
				});

			},

			deleteRole(row){
				let ids = [row.id];
				this.deleteRoles(ids);
			},

			batchDelRoles(){
				let ids = [];
				for(let data of this.selectChoice){
					ids.push(data.id);
				}
				this.deleteRoles(ids);
			},

			deleteRoles(ids){
				let self = this;
				let param = {ids:ids};
				if(param.ids.length == 0){
					self.$notify({
						title: '提示',
						message: "至少选择一条记录！",
						type: 'warning'
					});
					return
				}
				self.$confirm('确定删除该信息？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http({
						url: "/jinl/role/deleteRoleDetail",
						method: "post",
						data: JSON.stringify(param),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							self.getList();
							self.$notify({
								title: '提示',
								message: "删除成功！",
								type: 'success'
							});
							return
						}
						self.$notify({
							title: '提示',
							message: "操作失败，请联系管理员！",
							type: 'error'
						});
					});
				});
			},

			addRole(){
				this.roleDetail = {id:""};
				this.operateType = "add";
				this.addDialog = true;
			},

			editRole(rowData){
				this.roleDetail = Object.assign({},rowData);
				this.operateType = "edit";
				this.selfValue = rowData.roleName;
				this.addDialog = true;
			}
        },
        mounted(){
			let self = this;
			self.getList();
			self.$eventBus.$on("updateRoleList",function () {
				self.addDialog = false;
				self.getList()
			})
        },
        components: {
            Add,
        }
    }
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
</style>
